<template>
  <div>
    <div v-show="videoShow">
        <video :src="videoSrc" controls="controls" class="main_video"></video>
    </div>
    <div>
      <h1>众筹故事</h1>
      <p v-for="(title,index) in imgSrc" :key="index"><img :src="title" alt="" class="main_img"></p>
      <p class="gongZhongHao"><img src="https://storage.jd.com/zc-ued-fe/zc_oa_qrcode.jpg" alt=""></p>
      <p class="gongZhongHao">推荐关注「鬼见愁」公众号，我们会为您提供咨询服务，及时同步最新项目进展和优惠活动。</p>
      <p class="p3">
        分享到
        <i class="icon" @click="toA"><img src="~assets/icon/QQ.png"></i>
        <i class="icon" @click="toA"><img src="~assets/icon/weixin.png"></i>
        <i class="icon" @click="toA"><img src="~assets/icon/weibo.png"></i>
      </p>
      <p></p>
    </div>
  </div>
</template>

<script>
import{getDetail} from '../../../../../../../../server/getDetail'
export default {
  data() {
    return {
      videoSrc:'https://vod.300hu.com/4c1f7a6atransbjngwcloud1oss/3e3ce948329307683856330753/v.f30.mp4',
      imgSrc:[
        'https://img30.360buyimg.com/cf/jfs/t1/140318/4/1570/77289/5ef811c5E6c986839/bdadb28817042064.jpg',
        "https://img30.360buyimg.com/cf/jfs/t1/129931/31/3180/442965/5ef811d5E4989fcc5/a3fb8446701455fc.jpg",
        "https://img30.360buyimg.com/cf/jfs/t1/135676/15/1894/461182/5edf6627E6d43a209/c0a027b394cb89ed.jpg",
      ],
      videoShow:true,
    }
  },
  methods: {
    toA() {//分享链接
      alert('没有接口');
    },
  },
  created() {
    var data = {
      'gid':this.$route.query.gid,
    };
    getDetail('index/Getdetailitem/Main',data).then(res=>{
      if(res.err_code){
        if(res.err_code==1000){
          if(res.data[0]!=1){
            this.videoSrc = res.data[0];
          }else{
            this.videoShow = false;
          }
          this.imgSrc = res.data[1];
        }else{

        }
      }else{
        this.$router.push({path:'home'});
      }
      // https://vod.300hu.com/4c1f7a6atransbjngwcloud1oss/615ca309328231035987349505/v.f30.mp4
    })
  }
}
</script>

<style scoped>
  .main_video{
    width: 100%;
  }
  .main_img{
    width: 100%;
  }
  .gongZhongHao{
    text-align: center;
  }
  .gongZhongHao img{
        width: 14vw;
  }
  .p3{
    font-size: 1.06vw;
    margin-top: 2.2vw;
    text-align: right;
    padding-right: 6vw;
    margin-bottom: 2vw;
  }
  .icon{
    display: inline-block;
    width: 1.9vw;
    text-align: center;
    height: 1.9vw;
    line-height: 2.7vw;
    /* border: 1px solid; */
    border-radius: 0.41667vw 0.41667vw;
    background-color: #A4A4A4;
    margin-right: 0.3vw;
    cursor: pointer;
  }
  .icon img{
      width: 1.6vw;
    height: 1.4vw;
    margin: 0;
  }
  .icon:nth-child(1):hover{
    background-color: #34A4E2;
  }
  .icon:nth-child(2):hover{
   background-color: #6FC830;
  }
  .icon:nth-child(3):hover{
   background-color: #FF0000;
  }
</style>